<template>
	<view class="page">
		<view v-if="loadding">
			<view class="address-yy" @click="closeAddress" v-if="addressInfo"></view>
			<view class="address" v-if="addressInfo">
				<view class="close" @click="closeAddress">
					<image src="../../../static/close.png"></image>
				</view>
				<view class="address-item" v-if="listData.length != 0">
					<view class="dotBox">
						<view class="dot"></view>
					</view>
					<view class="address-item-con">{{listData.star_address.b_name}}</view>
				</view>
				<view class="address-item" v-for="(item,index) of listData.lineInformation" v-if="listData.length != 0">
					<view class="dotBox">
						<view class="dot dotEnd"></view>
					</view>
					<view class="address-item-con">{{item.m_name}}</view>
				</view>
				<view class="address-item address-item-end" v-if="listData.length != 0">
					<view class="dotBox">
						<view class="dot"></view>
					</view>
					<view class="address-item-con">{{listData.end_address.d_name}}</view>
				</view>
			</view>
			<view class="item">
				<view class="item-head">
					<image class="return" @click="gotoReturn" src="../../../static/whiBg.png">
					</image>
					<view class="item-head-title">
						订单详情
					</view>
				</view>
				<view class="item-content">
					<view class="item-content-con">
						<!-- <view class="item-content-con-status">
							已付款
						</view> -->
						<!-- <view class="item-content-con-status" v-if="listData.status==0 && listData.travel_status == 0">
							待付款
						</view>
						<view class="item-content-con-status"
							v-if="listData.status==1 &&listData.travel_status ==0 && listData.owner_status < 1">
							已付款
						</view>
						<view class="item-content-con-status"
							v-if="listData.travel_status==0 && listData.status ==1 &&listData.owner_status==1">
							待出发
						</view>
						<view class="item-content-con-status" v-if="listData.travel_status==1 && listData.status ==1 ">
							行驶中
						</view>
						<view class="item-content-con-status" v-if="listData.status==2 && listData.travel_status ==0 ">
							已取消
						</view>
						<view class="item-content-con-status" v-if="listData.travel_status==2 && listData.status ==1 ">
							已结束
						</view> -->
						<!-- <text class="item-content-con-status">已付款</text> -->
						<!-- <text>计划 6 天后出发</text> -->
						<view class="warting" v-if="listData.carplan.length ==0">等待安排中，稍后提供司机与车辆信息</view>
						<view class="warting" v-else>已安排</view>
					</view>
					<view @click="openAddress()" class="item-content-con" v-if="listData.length != 0">
						<view class="item-content-con-add">{{listData.star_address.b_name}}</view>
						<text class="item-content-con-jt"> — ></text>
						<view class="item-content-con-add">{{listData.end_address.d_name}}</view>
					</view>
					<view class="item-content-con item-content-con2">
						<text>{{listData.star_time}}</text>
						<text class="item-content-con-jt">—</text>
						<text>{{listData.end_time}}</text>
					</view>
				</view>
			</view>
			<view class="item2">
				<view class="item2-con1">
					<view class="item2-con1-title">
						线路信息
					</view>
					<view class="item2-con1-msg">
						<map :scale="map_scale" v-show="mapShow" :longitude="beglongitude" :latitude="beglatitude" :markers="markers"
							:polyline="polyline">
						</map>
						<view class="item2-con1-msg-name">
							<image src="../../../static/seek.png"></image>
							<text>线路信息</text>
						</view>
					</view>
				</view>
				<view class="item2-con2">
					<view class="item2-con2-title">
						<text class="item2-con1-title2 "> 订单信息</text>
						<view class="item2-con2-title-order">
							订单号: <text>{{listData.ordernum}}</text>
						</view>
					</view>
					<view class="item2-con2-content">
						<view class="item2-con2-content-item" v-for="(item,index) of busUseTab" :key="index"
							v-if="listData.purpose_id ==item.id">
							<text>包车用途</text>
							<view>{{item.purpose_name}}</view>
						</view>
						<!-- <view class="item2-con2-content-item">
							<text>包车用途</text>
							<view>旅游</view>
						</view> -->
						<view class="item2-con2-content-item" v-if="listData.total_km != null">
							<text>总里程</text>
							<view>{{listData.total_km}} km</view>
						</view>
						<view class="item2-con2-content-item">
							<text>乘车人数</text>
							<view>{{listData.passenger}}</view>
						</view>
						<view class="item2-con2-content-item">
							<text>往返类型</text>
							<view v-if="listData.back_type==1">单程</view>
							<view v-if="listData.back_type==2">往返</view>
						</view>
						<view class="item2-con2-content-item">
							<text>用车数量</text>
							<view>{{listData.car_number}}</view>
						</view>
					</view>
				</view>
				<view class="item2-con2 item2-con2-remark"><view class="item-remark-title">客户备注：</view><text v-if="listData.remark==''">无</text><text
						v-else>{{listData.remark}}</text></view>
				<view class="item2-con3" v-if="listData.carplan.length!=0">
					<view class="item2-con1-title">
						<text>车辆信息</text>
					</view>
					<view >
						<view class="car-wrap">
							<view class="car-list">
								<view class="car-item" v-for="(item,index) of listData.carplan" :key="index">
									<view class="car-botop">
										<view class="car-pic">
											<image :src="item.car_info4" mode=""></image>
										</view>
										<view class="car-info">
											<view class="car-item-head">
												<view>{{item.type_name}}</view>
											</view>
											<view class="car-number"><text>车牌号：</text>{{item.car_number}}</view>
											<view class="car-item-bottom">
												<view>司机电话：<text @click="phoneCall(item.driver_phone)"
														style="color: #0368FF;font-size: 30rpx;">{{item.driver_phone}}</text>
												</view>
												<!-- <view>司机：{{item.driver_name}}</view> -->
											</view>
										</view>

									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="item2-con4">
					<text class="item2-con1-title">费用明细</text>
					<view class="item3-con">
						<view class="item3-content">
							<text>司机费用</text>
							<view v-if="listData.length != 0">
								<text
									v-if="listData.driver_price.three_meals==0&&listData.driver_price.stay==0&&listData.driver_price.packing==0">由司机自行解决</text>
								<text v-if="listData.driver_price.three_meals==1">包司机三餐 </text>
								<text class="item3-zs" v-if="listData.driver_price.stay==1">包司机住宿 </text>
								<text v-if="listData.driver_price.packing==1">包司机停车位</text>
							</view>
						</view>
						<view class="item3-content">
							<text>预估行程费用</text>
							<text>&yen {{listData.price}}</text>
						</view>
						<view class="item3-content">
							<text>支付保证金</text>
							<view>
								<text class="total">总计</text>
								&yen {{listData.front_money}}
							</view>
						</view>
					</view>
				</view>

				<view class="item2-con-bottom" v-if="listData.status!=2 || listData.travel_status !=0 ">
					<view v-if="listData.status == 3" class="item2-con-bottom-content">
						<!-- <view @click="">取消退单</view> -->
						<view @click="delectOrder(id)" v-if="listData.status==2">删除订单</view>
						<view @click="cancelReturn(id)" v-if="listData.owner_status!=1">取消退单</view>
					</view>
					<view v-else>
						<view class="item2-con-bottom-content"
							v-if="listData.status==1&& listData.owner_status == 1 && listData.travel_status == 2">
							<!-- <view @click="cancel(id)" >取消订单</view> -->
							<view @click="gotoPage('/pagesUser/home/custom-car/custom-car')">再来一单</view>
						</view>
						<view class="item2-con-bottom-content" v-else>
							<view @click="delectOrder(id)" v-if="listData.status==0">删除订单</view>
							<view @click="cancel(id)" v-if="listData.owner_status!=1&&listData.status!=0">取消订单</view>
							<view @click="payment(id)" v-if="listData.status==0 ">去付款</view>
							<view @click="updata(id)">修改订单</view>
						</view>
					</view>

				</view>
			</view>
		</view>
		<view class="yy" v-if="reasonShow" @click="closeReacon"></view>
		<view class="reason" v-if="reasonShow">
			<label>请输入取消订单原因</label>
			<textarea v-model="reasonCon" style="resize: none;" focus="" ></textarea>
			<view class="reason-form" @click="cancelOrder2">提交</view>
		</view>
		<view class="null d-c-c p30" v-if="id == ''">
			<text class="iconfont icon-wushuju"></text>
			<text class="cont">亲，暂无相关记录哦</text>
		</view>
	</view>
</template>

<script>
	import Amap from '../../../common/lyn4ever-gaode.js';
	export default {
		data() {
			return {
				mapShow: true,
				addressInfo: false,
				pageShow: 0,
				loadding: false,
				status: '', //订单状态
				polyline: [],
				markers: [],
				beglongitude: '', //起点的经度
				beglatitude: '', //起点的纬度
				endlongitude: '', //终点的经度
				endlatitude: '', //终点的纬度
				wayPoiStr: "",
				id: '', //订单id
				listData: [],
				money: '', //定金与保证金
				busUseTab: '', //
				reasonShow:false,
				reasonCon:'',
				map_scale:'',
			}
		},
		onLoad(e) {
			let self = this;
			if (e.select == 1) {
				self.id = e.id;
				self.getData();
				this.getbusUseTab();
			}
		},
		onShow() {
			let self = this;
		},
		onPullDownRefresh() {
			this.getData();
			this.getbusUseTab();
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			closeReacon(){
				this.reasonShow=false
				this.mapShow = true;
			},
			cancelOrder2(id){
				let self = this;
				if(self.reasonCon == ''){
					uni.showToast({
						title:'请输入取消原因',
						duration:2000,
						icon:'none'
					});
					return;
				}
				self._post('order.CarOrder/user_cancel',
				{
					reason:self.reasonCon,
					order_id:self.id
				},
				function(res){
					if(res.code ==1){
						uni.showToast({
							title:'您的申请已提交，等待后台审核。',
							duration:2000,
							icon:'none'
						});
						self.timer = setTimeout( () => {
						  self.getNav();
						}, 1000);
						if (self.timer) {
							clearTimeout(self.timer);
							self.timer = null;
						}
						self.reasonShow = false;
						//self.getNav();
					}
				})
			},
			/* 取消退单 */
			cancelReturn() {
				let self = this;
				uni.showModal({
					title: '温馨提示',
					content: '是否要取消此订单',
					success(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '取消中'
							});
							self._post('order.CarOrder/cancel_chargeback', {
									id: self.id,
									type:1
								},
								function(res) {
									if (res.data.id == self.id) {
										uni.showToast({
											title: '取消成功'
										});
										uni.navigateTo({
											url: '/pagesUser/journey/journey'
										});
									}
									uni.hideLoading();
								});
						}else if(res.cancel){
							return;
						}
					}
				})
				
			},
			/* 删除订单 */
			delectOrder() {
				let self = this;
				uni.showModal({
					title: '温馨提示',
					content: '是否要删除此订单',
					success(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '删除中'
							});
							self._post('order.CarOrder/del_order', {
									id: self.id
								},
								function(res) {
									if (res.data.id == self.id) {
										uni.showToast({
											title: '删除成功'
										});
										uni.navigateTo({
											url: '/pagesUser/journey/journey'
										});
									}
									uni.hideLoading();
								});
						}else if(res.cancel){
							return;
						}
					}
				})

			},
			gotoReturn() {
				uni.navigateBack();
				//uni.navigateBack();
			},
			/* 拨打电话 */
			phoneCall(phone) {
				let self = this;
				uni.makePhoneCall({
					phoneNumber: phone
				});
			},
			/* 修改需求 */
			updata(id) {
				//console.log(id)
				uni.navigateTo({
					url: '/pagesUser/journey/updata/updata?select=1&&id=' + id 
				});
			},
			/* 获取包车用途的标签 */
			getbusUseTab() {
				let self = this;
				uni.showLoading({
					title: '加载中'
				});
				self._post('order.CarOrder/get_purpose', {}, function(res) {
					self.busUseTab = res.data.list;
					uni.hideLoading();
				});
			},
			/* 打开地址详情 */
			openAddress() {
				this.addressInfo = true;
				this.mapShow = false;
			},
			/* 关闭地址详情 */
			closeAddress() {
				this.addressInfo = false;
				this.mapShow = true;
			},
			/* 付款 */
			payment(id) {
				uni.navigateTo({
					url: '/pagesUser/paymentPage/paymentPage?select=1&&order_id=' + id
				})
			},
			/* 取消 */
			cancel() {
				let self = this;
				uni.showModal({
					title:'温馨提示',
					content:'是否要取消此订单',
					success(res) {
						if(res.confirm){
							self.reasonShow=true;
							self.mapShow = false;
							//self.id = id;
						}else{
							return;
						}
					}
				})
				// uni.showLoading({
				// 	title: '取消'
				// });
				// self._post('order.CarOrder/user_cancel', {
				// 		order_id: self.id
				// 	},
				// 	function(res) {
				// 		if (res.data.id == self.id) {
				// 			uni.showToast({
				// 				title: '取消成功'
				// 			});
				// 			uni.navigateTo({
				// 				url: '/pagesUser/journey/journey'
				// 			});
				// 		}
				// 		uni.hideLoading();
				// 	});
			},
			getData() {
				let self = this;
				if (self.id != '') {
					uni.showLoading({
						title: '加载中'
					});
					self._post('order.CarOrder/get_details', {
							id: self.id
						},
						function(res) {

							self.pageShow = 1;
							self.listData = res.data.info;
							if(self.listData.total_km>1000){
								self.map_scale = 5
							} else if(self.listData.total_km>500&&self.listData.total_km<=1000){
								self.map_scale = 6
							}else if(self.listData.total_km>200&&self.listData.total_km<=500){
								self.map_scale = 6
							}else if(self.listData.total_km >100&&self.listData.total_km<=200){
								self.map_scale = 6.2
							}else if(self.listData.total_km>60&&self.listData.total_km<=100){
								self.map_scale = 7
							}else if(self.listData.total_km>30&&self.listData.total_km<=60){
								self.map_scale = 8
							}else if(self.listData.total_km>20&&self.listData.total_km<=30){
								self.map_scale = 10
							}else if(self.listData.total_km<20){
								self.map_scale = 11
							}
							console.log(self.map_scale)
							self.beglongitude = self.listData.star_address.b_longitude;
							self.beglatitude = self.listData.star_address.b_latitude;
							self.endlongitude = self.listData.end_address.d_longitude;
							self.endlatitude = self.listData.end_address.d_latitude;
							self.wayPoiStr = self.listData.waypoistr;
							self.money = Number(self.listData.front_money) + Number(self.listData.ensure_money)

							var wayPoi = self.beglongitude + "," + self.beglatitude;
							var wayPoiStr = self.wayPoiStr;
							var endPoi = self.endlongitude + "," + self.endlatitude;
							Amap.line(wayPoi, endPoi, wayPoiStr, function(res) {
								self.polyline.push(res)
							});

							Amap.markers(wayPoi, endPoi, wayPoiStr, function(res) {
								self.markers.push.apply(self.markers, res)
							});
							//}
							//self.listData = res.data.info;
							// self.beglongitude = self.listData.star_address.b_longitude;
							// self.beglatitude = self.listData.star_address.b_latitude;
							// self.endlongitude = self.listData.end_address.d_longitude;
							// self.endlatitude = self.listData.end_address.d_latitude;
							// self.wayPoiStr = self.listData.waypoistr;
							//console.log(self.wayPoiStr)
							//console.log(self.listData)
							self.loadding = true;
							uni.hideLoading();
						});
				}
			},
			/*跳转页面*/
			gotoPage(path) {
				let self = this;
				if (path.startsWith('/')) {
					uni.navigateTo({
						url: path
					});
				} else {
					self[path]();
				}
			},
		}
	}
</script>

<style lang="scss">
	@import 'detail.scss';
</style>
